<template>
	<!-- 退费工作列表模块-->
	<div v-loading="loading">
		<!-- 查询条件 -->
		<div class="fastQuery">
			<el-row>
				<el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
				<el-col :span="10">
				</el-col>
				<el-col :span="4" class="moreCondition">
					<span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
					<span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
				</el-col>
				<el-col :span="8"></el-col>
			</el-row>
		</div>
		<!-- 查询表单 -->
		<el-form v-show="isShow" :model="searchParams" ref="ruleForm" label-width="120px" class="search_container">
			<el-row>
				<el-col :span="6">
					<el-form-item label="保单号" prop="schdrnum">
						<el-input clearable v-model="searchParams.schdrnum" placeholder="保单号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="受理号" prop="caseno">
						<el-input clearable v-model="searchParams.caseno" placeholder="受理号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="退费号" prop="paymentno">
						<el-input clearable v-model="searchParams.paymentno" placeholder="退费号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="业务类型" prop="sbusitype">
						<el-select clearable v-model="couponSelected" placeholder="业务类型" @change="changeType">
							<el-option v-for="item in RefundBusType" :key="item.sbusitype" :label="item.sbustypename" :value="item.sbusitype"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="最近处理时间（起始）" prop="dealbeginDate">
						<el-col>
							<el-date-picker clearable v-model="searchParams.dealbeginDate" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
							type="datetime"  placeholder="选择日期" @change="clearTimeSetDefault">
							</el-date-picker>
						</el-col>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="最近处理时间（结束）" prop="dealendDate">
						<el-col>
							<el-date-picker clearable v-model="searchParams.dealendDate" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
							type="datetime"  placeholder="选择日期" @change="clearTimeSetDefault">
							</el-date-picker>
						</el-col>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="分支机构" prop="scompanyid">
						<el-select clearable v-model="companySelected" placeholder="分支机构" @change="changeCompanyid">
							<el-option v-for="item in companylist" :key="item.SORGID" :label="item.SORGNAME" :value="item.SORGID"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="退费处理状态" prop="srouteid">
						<el-select clearable v-model="srouteidSelected" placeholder="退费处理状态"  @change="changeSrouteidId">
							<el-option v-for="item in SrouteidType" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="text_center">
					<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch()"></el-button>
				</el-col>
			</el-row>

		</el-form>

		<div class="contain">

			<!-- 查询结果列表 -->
			<div class="table_container">
				<el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" highlight-current-row
				header-cell-class-name="table-header-class" :row-class-name="tableRowClassName" style="width:100%">
					<el-table-column   label="复核返回" align='center' show-overflow-tooltip min-width="120">
						<template slot-scope="scope">
							<el-link style="color: #ff0000;cursor: auto ;"  type="primary"  >{{ scope.row.srouteid =="apo_update"&&"1" == scope.row.flag06?"!":"" }}
							</el-link>
						</template>
					</el-table-column>
                <el-table-column
					min-width="80"
					label="影像信息"
					align='center'>
                    <template slot-scope="scope">
                         <!-- <el-button type="text" size="small" icon="el-icon-camera" @click="showImage(scope.row)">影像信息</el-button>  -->
						 <span class="operationIcon" @click="showImage(scope.row)">
                            <i class="el-icon-camera"></i>
                        </span>
                    </template>
                </el-table-column>
					<el-table-column property="paymentno" label="退费号" align='center' show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="scaseno" label="受理号" :formatter="filterCaseno" align='center' show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="schdrnum" label="保单号" align='center' show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="srouteid" label="退费状态" align='center' :formatter="filterRouteid" show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="companyName" label="公司别" align='center' show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="sinsured" label="客户姓名" align='center' show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="sdealtime" label="最近处理日期" align='center' show-overflow-tooltip min-width="160"></el-table-column>
					<el-table-column property="sbusitype" label="任务类型" align='center' show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column property="sremark" label="最新备注" align='center'  show-overflow-tooltip min-width="120"></el-table-column>
					<el-table-column label="备注" align='center' show-overflow-tooltip min-width="100">
						<template slot-scope="scope">
							<el-link class ="point"  type="primary" @click="showRemark(scope.row.staskno)">{{ scope.row.remark?scope.row.remark:'备注' }}</el-link>
						</template>
					</el-table-column>
					<el-table-column label="信函内容" align='center' show-overflow-tooltip min-width="80">
						<template slot-scope="scope">
							<el-link class ="point"  type="primary" @click="showFailReason(scope.row.staskno)">信函内容</el-link>
						</template>
					</el-table-column>
					<el-table-column label="操作" align='center' show-overflow-tooltip min-width="80">
						<template slot-scope="scope">
							<el-link class ="point"  type="primary" @click="showRefundHistory(scope.row.staskno)">流转记录</el-link>
						</template>
					</el-table-column>
					<el-table-column property="staskno" v-if='false'></el-table-column>
					<el-table-column property="sflowid" v-if='false'></el-table-column>
					<el-table-column property="scompanyid" v-if='false'></el-table-column>
					<el-table-column property="sclmstatus" v-if='false'></el-table-column>
					<el-table-column property="screuser" v-if='false'></el-table-column>
				</el-table>
				<el-row>
					<el-col :span="24">
						<div class="pagination">
							<el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
							:layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
							@size-change='handleSizeChange'>
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 备注 -->
			<cdfs-remark-list :taskNo="remarkTaskNo" :drawer="showRemarkFlag" @close="hideRemark"></cdfs-remark-list>
			<!-- 任务流转记录 -->
			<refund-his  :taskNo="historyTaskNo" :drawer="showHisFlag" @close="hideHis"></refund-his>
			
			<!--影像列表-->
			<cdfs-image-list :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImage"></cdfs-image-list>
			<!--信函内容-->
			<refund-fail-reason :drawer="showFailReasonFlag" :flag="searchParams.type" :taskNo="showFailReasonTaskNo" @close="hideFailReason"></refund-fail-reason>
			
		</div>
	</div>
</template>

<script>
	import RefundConstantType, {
		getCompanylist,
		getRefundList,
		updateTaskInfo,
		isSearchParamsEmpty,
		isCntainChinese,
		calculationTime
	} from "@/api/refund/RefundCommon";
	import constant from '@/utils/constant';
	import CdfsRemarkList from "../cdfsRemarkList";
	import refundHis from "./refundHis";
	import underwritPng from "@/assets/img/botton/underwrit.png"
	import preservePng from "@/assets/img/botton/preserve.png"
	import gobackPng from "@/assets/img/botton/goback.png"
	import cdfsImageList from "@/page/common/cdfsImageList";
	import refundFailReason from "./refundFailReason";
	export default {
		components: {
			CdfsRemarkList,
			refundHis,
			cdfsImageList,
			refundFailReason
		},
		data() {
			return {
				RefundBusType: RefundConstantType.busiType,
				SrouteidType:RefundConstantType.routeidType,
				companylist: {},
				isShow: false,
				underwritPng: underwritPng,
				preservePng: preservePng,
				gobackPng: gobackPng,
				loading: false,
				srouteid: '', //测试写死
				tableData: [],
				remarkTaskNo: "",
				historyTaskNo: "",
				showRemarkFlag: false,
				showHisFlag: false,
				emptySearchParams:{},//空的查询
				couponSelected: "", //业务类型
				companySelected: "", //分支机构
				srouteidSelected: "", //退费处理状态
				showImageFlag:false,
				showImageApplnum:'',
				showFailReasonFlag:false,
				showFailReasonTaskNo:"",
				searchParams: {
					type:"query",
					srouteid: "",
					schdrnum: "",
					caseno: "",
					paymentno: "",
					companyid: "",
					sbusitype: "",
					dealbeginDate: "",
					dealendDate: "",
					pageNumber: "",
					pageSize: ""
				},
				//需要给分页组件传的信息
				paginations: {
					total: 0, // 总数
					pageIndex: 1, // 当前位于哪页
					pageSize: 10, // 1页显示多少条
					pageSizes: [5, 10, 15, 20], //每页显示多少条
					layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
				},
				isFirstEnter:false
			}
		},
		activated(){
			this.search();

		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.search();
		        }
		    };
		},
		created() {
			this.emptySearchParams= JSON.parse(JSON.stringify(this.searchParams));
			/*初始化下拉框获取机构信息 */
			this.getOriList();
		},

		methods: {
			showFailReason(taskno) {
				this.showFailReasonTaskNo = taskno;
				this.showFailReasonFlag = true;
			},
			hideFailReason(){
				this.showFailReasonFlag = false;
				this.showFailReasonTaskNo="";
			},
			showImage(row) {
				this.showImageApplnum = row.scaseno;
				this.showImageFlag = true;
			},
			hideImage() {
				this.showImageApplnum = "";
				this.showImageFlag = false;
			},
			/* 时间初始设置 */
			clearTimeSetDefault(val) {
				if (val == null) {
					val = '';
				}
			},
			/* 选项框切换业务类型 */
			changeType() {
				this.searchParams.sbusitype = this.couponSelected; //获取业务类型key  searchParams.sbusitype
			},
			/* 选项框切换分支机构 */
			changeCompanyid() {
				this.searchParams.companyid = this.companySelected; //获取业务类型key  searchParams.sbusitype
			},
			/* 选项框切换退费处理状态 */
			changeSrouteidId() {
				this.searchParams.srouteid = this.srouteidSelected; //获取退费处理类型key  searchParams.sbusitype
			},
			handleSizeChange(val) {
				this.paginations.pageSize = val;
				console.log(`每页 ${val} 条`);
				this.getList();
			},
			handleCurrentChange(val) {
				this.paginations.pageIndex = val;
				console.log(`当前页: ${val}`);
				this.getList();
			},
			showorhide() {
				this.isShow = !this.isShow
			},
			formatFlag06:function(row){
				if(row.srouteid =="apo_update"&&"1" == row.flag06) {
					return "!";
				}
				return "";
			},
			resetSearch() {
				this.couponSelected="",
				this.companySelected="",
				this.srouteidSelected= "",
				this.searchParams= JSON.parse(JSON.stringify(this.emptySearchParams));
			},
			showRemark(taskNo) {
				this.remarkTaskNo = taskNo;
				this.showRemarkFlag = true;
			},
			showRefundHistory(taskNo) {
				this.historyTaskNo = taskNo;
				this.showHisFlag = true;
			},
			hideRemark() {
				this.remarkTaskNo = "";
				this.showRemarkFlag = false;
			},
			hideHis() {
				this.historyTaskNo = "";
				this.showHisFlag = false;
			},
			tableRowClassName:function(row) {
				let routeid = row.row.srouteid;
				/* 	实时退费的就显示蓝色 */
				if (row.row.screuser =="reAUTOPAY") {
					return "blue";
				}
				if(routeid =="apo_zhaohui"){
					/* 照会POOL的任务超过25个工作日就显示红色 */
					if (calculationTime(row.row.sdealtime,25)) {
						return "red"
					}
				}
				/* 默认黑色 */
				return "black";
			},
			filterCaseno:function(row){
				let caseno = row.scaseno;
				if (""!=caseno &&caseno.length !=0 && 0 ==caseno) {
					return "";
				}
				return caseno;
			},
			/* 退费状态过滤 */
			filterRouteid:function(row) {
				let resultName="";
				this.SrouteidType.forEach( item =>{
					if (row.srouteid == item.value) {
						resultName = item.name;
					}
				})
				return resultName;
			},
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},
			getOriList() {
				getCompanylist().then( data => this.companylist = data);
			},
			search() {
				if(isSearchParamsEmpty(this.searchParams) &&this.srouteidSelected =="") {
					this.$message.error("请选择一项查询条件！");
					return;
				}
				if(this.searchParams.schdrnum !="" && isCntainChinese(this.searchParams.schdrnum)){
					this.$message.error("请正确输入保单号！");
					return;
				}
				if(this.searchParams.caseno !="" && isCntainChinese(this.searchParams.caseno)){
					this.$message.error("请正确输入受理号！");
					return;
				}
				if(this.searchParams.paymentno !="" && isCntainChinese(this.searchParams.paymentno)){
					this.$message.error("请正确输入退费号！");
					return;
				}
				if (this.searchParams.dealbeginDate && this.searchParams.dealendDate) {
					let oDate1 = new Date(this.searchParams.dealbeginDate);
					let oDate2 = new Date(this.searchParams.dealendDate);
					if(oDate1.getTime() > oDate2.getTime()){
						this.$message.error("最近处理起始时间不能大于结束时间！");
						return;
					}
				}
				this.paginations.pageIndex = 1;
				this.paginations.pageSize = 10;
				this.getList();
			},
			getList() {
				this.show();
				this.paginations.total = 0;
				this.tableData = [];
				this.searchParams.pageNumber = this.paginations.pageIndex;
				this.searchParams.pageSize = this.paginations.pageSize;
				getRefundList(this.searchParams).then(result => {
					if (result.resultCode == constant.SUCCESS && result.data && result.data.list.length) {
						let pageData = result.data;
						this.paginations.total = pageData.total;
						this.paginations.currentPage = pageData.pageNum;
						this.tableData = pageData.list;
					} else {
							this.$message.error("无符合条件任务！");
						}
					this.cancle();
				}).catch(err => {
					console.log("error", err);
					this.cancle();
				});
			},
			viewFile(schdrnum, scasno, staskno, sbusitype) {
				let param = {
					'chdrnum': schdrnum,
					'casno': scasno,
					'taskno': staskno,
					'busitype': sbusitype
				}
				console.log("参数", param);
			},
			routingtask(destrouteid) {
				let arrTaskList = [];
				this.$refs.multipleTable.selection.forEach(item => {
					arrTaskList.push(item);
				});
				if (arrTaskList.length == 0) {
					this.$message.error("请选择任务！");
					return;
				}
				console.log(arrTaskList);
				let params = {
					"destrouteid":destrouteid,//任务目的流程节点
					"listTask":arrTaskList,
					"hisflag":this.srouteid
				}
				this.show();
				updateTaskInfo(params).then( result =>{
					if(result.resultCode == constant.SUCCESS && result.data) {
						let code =result.data;
						if(code == constant.SUCCESS) {
							this.$message.success("任务流转成功！");
							this.paginations.pageIndex = 1;
							this.paginations.pageSize = 10;
							this.getList();
						} else {
							this.$message.error("任务流转失败！");
						}
						console.log("update result:"+result.data);
					}
					this.cancle();
				}).catch(err => {
					console.log(err);
					this.cancle();
				})
			},
		},
		mounted() {
			setTimeout(()=>{
				this.isFirstEnter=true;
			},100)
		}
	}
</script>

<style lang="less" scoped>

	.point{
		cursor: pointer;
	}
	.pagination {
		padding: 10px 20px;
		text-align: right;
	}
	.fixd_botton_box {
		z-index: 9999;
		position: fixed;
		right: 0px;
		top: 60%;
		width: 64px;
		height: auto;

		.fixd_botton {
			border-radius: 4px;
			background-color: #999999;
			cursor: pointer;
			height: 24px;
			width: 24px;
			display: block;
			padding: 8px;
		}
	}
	.fastQuery {
		padding: 15px 20px 10px 20px;
		background: #fff;
		border-bottom: 1px solid #e1e1e1;
		.fastQuery_title {
			color: #666;
			padding: 6px 0px;
		}
		.moreCondition {
			color: #68a3fc;
			cursor: pointer;
			padding: 6px 0px;
			text-align: center;
			width: 80%;
			.el-icon-d-arrow-right {
				transform: rotate(90deg);
			}
			.el-icon-d-arrow-left {
				transform: rotate(-90deg);
			}
		}
	}
</style>
<style>
	.el-table .black{
		color: #0c1014;
	}
	.el-table .blue{
		color: #1f65e8;
	}
	.el-table .red{
		color: #F92672;
	}
</style>
